<script lang="ts" setup>
import {computed, ref} from "vue";
import {toast} from "../../components/popup/popup";
import {goManage} from "../../tools/go";
import {getSelectRoleList} from "../../api/role/role"
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UniEasyinput from "../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import {set, get} from "../../store"
import {putUserRole} from "../../api/user/userRole"


const searchKey = ref("");
const userId = ref(10086);
const userNick = ref("");
const status = ref(1);
const time = ref("");

const selectedRoles = ref<string[]>([]);

const roles = ref([
  { id: "1", name: "系统管理员" },
  { id: "2", name: "运营人员" },
  { id: "3", name: "普通用户" },
  { id: "4", name: "访客" },
]);

const roleList = ref([])

const handleBack = () => {
  goManage()
};

const toggleRole = (roleId: string) => {
  roleId = roleId + "";
  const index = selectedRoles.value.indexOf(roleId);
  if (index > -1) {
    selectedRoles.value.splice(index, 1);
  } else {
    selectedRoles.value.push(roleId);
  }
};

const roleFilter = computed(() => {
  return roleList.value.filter((role) => {
    return !searchKey.value || role.name.toLowerCase().includes(searchKey.value.toLowerCase());
  });
});

const handleSubmit = () => {
  if (!userNick.value) {
    toast("请输入用户昵称", "none")
    return;
  }

  if (selectedRoles.value.length === 0) {
    toast("请选择角色", "none")
    return;
  }


  const submitData = {
    userId: userId.value,
    userNick: userNick.value,
    roleId: selectedRoles.value.join(","),
    status: status.value,
    time: time.value,
  };



  putUserRole({
    userId: submitData.userId,
    roleId: submitData.roleId,
  }).then(res => {
    if (res.code === 200) {
      toast("保存成功", "success")
      goManage()
    }
  })


};


const init = () => {
  getSelectRoleList().then(res => {
    roleList.value = res.data
    let temp =  get()["userManagementEditing"]
    console.log(temp)
    userId.value = temp.userId
    userNick.value = temp.userNick
    selectedRoles.value = temp.roleId
  })
}
init()
</script>


<template>
  <view class="page-container">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <uni-icons @click="handleBack" type="left" size="20" class="back-icon" />
      <text class="header-title">编辑用户</text>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content-scroll" scroll-y>
      <!-- 用户信息 -->
      <view class="info-card">
        <view class="info-item">
          <text class="label">用户ID</text>
          <text class="value">{{ userId }}</text>
        </view>
        <view class="info-item">
          <text class="label">用户昵称</text>
          <uni-easyinput
              v-model="userNick"
              placeholder="请输入用户昵称"
              :clearable="true"
              disabled
          />
        </view>
      </view>

      <!-- 搜索 -->
      <view class="info-card">
        <text class="card-title">搜索</text>
        <input
            class="search-input"
            placeholder="请输入搜索角色名称"
            v-model="searchKey"
        />
      </view>

      <!-- 角色信息 -->
      <view class="info-card">
        <text class="card-title">拥有角色</text>

        <scroll-view scroll-y class="scroll_H">
          <view class="role-list">
            <view
                v-for="(role, index) in roleFilter"
                :key="index"
                class="role-item"
                @click="toggleRole(role.id)"
            >
              <text class="role-name">{{ role.name }}</text>
              <uni-icons
                  v-if="selectedRoles.includes(role.id + '')"
                  type="checkbox-filled"
                  size="20"
                  color="#2979ff"
              />
              <uni-icons v-else type="circle" size="20" color="#999" />
            </view>
          </view>
        </scroll-view>

      </view>

      <!-- 状态设置 -->
      <view class="info-card">
        <text class="card-title">状态设置</text>
        <view class="status-group">
          <view
              class="status-item"
              :class="{ active: status === 1 }"
              @click="status = 1"
          >
            <text>启用</text>
          </view>
          <view
              class="status-item"
              :class="{ active: status === 0 }"
              @click="status = 0"
          >
            <text>禁用</text>
          </view>
        </view>
      </view>


    </scroll-view>

    <!-- 底部按钮 -->
    <view class="footer">
      <uni-button type="primary" @click="handleSubmit">保存修改</uni-button>
    </view>
  </view>
</template>



<style lang="scss" scoped>

.scroll_H{
  height: 200rpx;
}

.search-input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
}

.page-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.nav-header {
  display: flex;
  align-items: center;
  height: 88rpx;
  background-color: #ffffff;
  padding: 0 32rpx;
  position: relative;
  flex-shrink: 0;
}

.back-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
}

.header-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 500;
}

.content-scroll {
  flex: 1;
  overflow: auto;
}

.info-card {
  background-color: #ffffff;
  margin: 20rpx;
  padding: 32rpx;
  border-radius: 12rpx;
}

.info-item {
  margin-bottom: 32rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  display: block;
  font-size: 14px;
  color: #666666;
  margin-bottom: 16rpx;
}

.value {
  font-size: 14px;
  color: #999999;
}

.card-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 32rpx;
  display: block;
}

.role-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.role-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
}

.role-name {
  font-size: 14px;
  color: #333333;
}

.status-group {
  display: flex;
  gap: 24rpx;
}

.status-item {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  font-size: 14px;
  color: #666666;
}

.status-item.active {
  background-color: #2979ff;
  color: #ffffff;
}

.time-picker {
  width: 100%;
  background-color: #f8f8f8;
  border-radius: 8rpx;
}

.footer {
  padding: 32rpx;
  background-color: #ffffff;
  flex-shrink: 0;
}
</style>
